<template>
  <div class="banner">
    <div class="user">
      <b>{{ user ? user.nickname : "xxx" }}</b
      ><small>欢迎回来</small><a href="#" @click="out">退出</a>
    </div>
    <div class="nav">
      <img src="../assets/logo.webp" alt="小程序分享码" />
      <div class="search">
        <select name="" id="" style="outline: none">
          <option value="bb">宝贝</option>
          <option value="dp">店铺</option>
        </select>
        <input
          class="btn1"
          type="text"
          placeholder="请输入关键词"
          v-model="input"
          style="outline: none"
        />
        <input style="outline: none" class="btn2" type="button" value="搜索" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  props: ["user"],
  mounted() {
    this.getUser();
  },
  methods: {
    getUser() {
    },
    out(){
     sessionStorage.clear();
      this.$router.push('/login');
    }
  },
};
</script>

<style lang="less" scoped>
.banner {
  padding-bottom: 40px;

  border-bottom: 2px #ffa4a4 solid;
  .user {
    background-color: #f9f9f9;
    display: flex;
    line-height: 30px;
    padding-left: 10vh;

    b {
      color: #e22140;
    }

    small {
      margin: 0 50px 0 10px;
    }

    a {
      color: #c1c1c1;
    }

    a:hover {
      color: #e22140;
    }
  }

  .nav {
    display: flex;
    // justify-content: center;
    //  background-color:#d81212;
    margin: 20px 0px 0px 100px;
    align-items: center;
    .search {
      display: flex;
      border: 2px #e22140 solid;
      margin-left: 150px;
      select {
        border: none;
        width: 60px;
        height: 32px;
        border: none;
        background: none;
      }

      .btn1 {
        border: none;
        width: 400px;
        height: 30px;
        background: none;
      }

      .btn2 {
        border: none;
        height: 32px;
        background: none;
      }
    }

    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>